<!DOCTYPE html>
<html>
<head>
    <title>Complex Plane Diagram</title>
</head>
<body>

<canvas id="complexPlaneCanvas" width="450" height="350"></canvas>

<script>
    const canvas = document.getElementById('complexPlaneCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Parameter Settings ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Drawing Parameters ---
    const centerX = 180;
    const centerY = 175;
    const radius = 90;
    const p_val = 0.55; // A representative value for p where 0 < p < 1

    // Translate the canvas origin to the center of the coordinate system for easier drawing
    ctx.translate(centerX, centerY);

    // --- Draw Axes ---
    const xAxisStart = -150;
    const xAxisEnd = 240;
    const yAxisStart = 140;
    const yAxisEnd = -140; // Negative for the upward direction in the canvas coordinate system
    const arrowSize = 10;

    // X-axis line
    ctx.beginPath();
    ctx.moveTo(xAxisStart, 0);
    ctx.lineTo(xAxisEnd, 0);
    ctx.stroke();

    // X-axis arrowhead
    ctx.beginPath();
    ctx.moveTo(xAxisEnd, 0);
    ctx.lineTo(xAxisEnd - arrowSize, -arrowSize / 2);
    ctx.lineTo(xAxisEnd - arrowSize, arrowSize / 2);
    ctx.closePath();
    ctx.fill();

    // Y-axis line
    ctx.beginPath();
    ctx.moveTo(0, yAxisStart);
    ctx.lineTo(0, yAxisEnd);
    ctx.stroke();

    // Y-axis arrowhead
    ctx.beginPath();
    ctx.moveTo(0, yAxisEnd);
    ctx.lineTo(-arrowSize / 2, yAxisEnd + arrowSize);
    ctx.lineTo(arrowSize / 2, yAxisEnd + arrowSize);
    ctx.closePath();
    ctx.fill();

    // --- Draw Labels for Axes ---
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('x', xAxisEnd + 15, 5);
    ctx.fillText('y', 18, yAxisEnd - 5);

    // --- Draw the Circle ---
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, 2 * Math.PI);
    ctx.stroke();

    // --- Draw Arrow on the Circle ---
    // Positioned in the top-left (second quadrant). In canvas coordinates (y-down),
    // this corresponds to the third quadrant of the standard mathematical plane.
    const arrowAngle = 5 * Math.PI / 4; // Angle to position the arrow
    const tipX = radius * Math.cos(arrowAngle);
    const tipY = radius * Math.sin(arrowAngle);

    ctx.save();
    ctx.translate(tipX, tipY);
    // Rotate to be tangent to the circle, pointing counter-clockwise
    ctx.rotate(arrowAngle + Math.PI / 2);
    const arrowHeadSize = 12;
    ctx.beginPath();
    ctx.moveTo(0, 0); // Tip of the arrow
    ctx.lineTo(-arrowHeadSize, arrowHeadSize / 2); // Wing 1
    ctx.moveTo(0,0);
    ctx.lineTo(-arrowHeadSize, -arrowHeadSize / 2); // Wing 2
    ctx.stroke();
    ctx.restore();

    // --- Draw the points p and p^-1 ---
    const pointDotRadius = 2.5;
    const p_x = p_val * radius;
    const p_inv_x = (1 / p_val) * radius;

    // Point p
    ctx.beginPath();
    ctx.arc(p_x, 0, pointDotRadius, 0, 2 * Math.PI);
    ctx.fill();

    // Point p^-1
    ctx.beginPath();
    ctx.arc(p_inv_x, 0, pointDotRadius, 0, 2 * Math.PI);
    ctx.fill();

    // --- Draw Labels for Points ---
    ctx.font = 'italic 22px Times New Roman';
    const labelYOffset = 25;
    ctx.fillText('p', p_x, labelYOffset);

    // Label p^-1 requires drawing the superscript manually
    ctx.textAlign = 'left'; // Align to the left for positioning 'p' and '-1'
    ctx.fillText('p', p_inv_x - 4, labelYOffset);
    ctx.font = '16px Times New Roman';
    ctx.fillText('-1', p_inv_x + 9, labelYOffset - 7); // Position '-1' as a superscript

    // --- Draw Figure Caption ---
    // Reset transform to draw relative to the canvas, not the translated origin
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.textAlign = 'center';
    ctx.font = '20px Times New Roman';
    ctx.fillText('Fig. 3.15', canvas.width / 2, canvas.height - 25);
</script>

</body>
</html>